<!-- pages/index/index.vue -->
<script>
  export default {
    name: 'indexpage',
  }
</script>
<script setup>
  import { ref, computed, onMounted, nextTick, watch } from 'vue'
  import { patientHomeKnowledge, doctorListApi } from '@/services/doctor.js'
  import FeedList from '@/pages/index/components/feed-list.vue'
  import DoctorList from '@/pages/index/components/doctor-list.vue'
  // 获取安全区域数据
  const { safeAreaInsets } = uni.getSystemInfoSync()

  // 标签页索引值
  const tabIndex = ref(0)
  // 标签页数据
  const feedTabs = ref([
    {
      label: '推荐',
      type: 'recommend',
      current: 1,
      hasMore: true,
      list: [],
      rendered: true,
      scrollTop: 0,
    },
    {
      label: '关注',
      type: 'like',
      current: 1,
      hasMore: true,
      list: [],
      rendered: false,
      scrollTop: 0,
    },
    {
      label: '减脂',
      type: 'fatReduction',
      current: 1,
      hasMore: true,
      list: [],
      rendered: false,
      scrollTop: 0,
    },
    {
      label: '饮食',
      type: 'food',
      current: 1,
      hasMore: true,
      list: [],
      rendered: false,
      scrollTop: 0,
    },
  ])

  // 标签页对应的类型 type
  const feedType = computed(() => feedTabs.value[tabIndex.value].type)
  // 标签页对应的页码 current
  const feedCurrent = computed(() => feedTabs.value[tabIndex.value].current)
  // 每次请求多少条数据
  const feedPageSize = ref(5)
  // 滚动到的距离
  const curScrollTop = ref(0)

  // 切换标签页
  async function onFeedTabChange(item) {
    console.log(item)
    // 标识当前选中的标签页
    tabIndex.value = item.index
    if (!feedTabs.value[item.index].rendered) {
      // 获取数据
      await getFeedList()
    }
    await nextTick(() => {
      // 等视图更新后在来设置curScrollTop值，说白了等列表切换后，，scroll-page渲染后
      curScrollTop.value = feedTabs.value[tabIndex.value].scrollTop
    })
    // 每个标签页只被初始一次
    feedTabs.value[item.index].rendered = true
  }

  const getFeedList = async () => {
    const res = await patientHomeKnowledge({
      type: feedType.value,
      current: feedCurrent.value,
      pageSize: feedPageSize.value,
    })
    console.log(res.data)
    //正则过滤html标签
    res.data.rows.forEach((row) => {
      row.content = row.content.replace(/<[^>]+>/g, '')
    })
    // 原来的list数据
    const list = feedTabs.value[tabIndex.value].list
    // 追加数据
    feedTabs.value[tabIndex.value].list = [...list, ...res.data.rows]
    // 列表数据的页码
    const current = feedTabs.value[tabIndex.value].current
    // 更新标签页码
    feedTabs.value[tabIndex.value].current = current + 1
    // 判断是否有更多数据 hasMore 总页数小于等于当前页码则为true 大于则为 false
    feedTabs.value[tabIndex.value].hasMore = current + 1 <= res.data.pageTotal
  }
  // 渲染列表

  getFeedList()
  const onScrollToLower = () => {
    // hasMore 为 true 时才去请求
    if (feedTabs.value[tabIndex.value].hasMore) getFeedList()
    const selectorQuery = uni.createSelectorQuery()
    //拿单个盒子的宽高和位置
    selectorQuery.select('.box').scrollOffset((offset) => {
      console.log(offset.scrollTop)
    })
    selectorQuery.exec()
  }

  const onscroll = (e) => {
    console.log(feedTabs.value[tabIndex.value].label, '-', e.detail.scrollTop)
    feedTabs.value[tabIndex.value].scrollTop = e.detail.scrollTop
  }

  // watch(
  //   () => feedTabs.value[tabIndex.value].scrollTop,
  //   async () => {
  //     await nextTick(() => {
  //       // 等视图更新后在来设置curScrollTop值，说白了等列表切换后，，scroll-page渲染后
  //       curScrollTop.value = feedTabs.value[tabIndex.value].scrollTop
  //     })
  //   }
  // )

  const doctorList = ref('')
  onMounted(async () => {
    const res = await doctorListApi()
    console.log(res)
    doctorList.value = res.data.rows
  })
</script>

<template>
  <scroll-page
    @scroll="onscroll"
    @scrolltolower="onScrollToLower"
    class="box"
    :scrollTop="curScrollTop"
  >
    <view
      class="index-page"
      :style="{ backgroundPositionY: -48 + safeAreaInsets.top + 'px' }"
    >
      <!-- 页面导航 -->
      <view
        :style="{ paddingTop: safeAreaInsets.top + 'px' }"
        class="page-navbar"
        >优医</view
      >

      <!-- 搜索栏 -->
      <view class="search-bar">
        <input
          placeholder-class="input-placeholder"
          placeholder="搜一搜: 疾病/症状/医生/健康知识"
          class="input"
          type="text"
        />
        <view class="icon-search">
          <uni-icons size="22" color="#C3C3C5" type="search" />
        </view>
      </view>
      <!-- 快速入口 -->
      <view class="quick-entry">
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-1.png"
          />
          <text class="label">问医生</text>
          <text class="small">按科室查问医生</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-entry-item"
          url="/subpkg_consult/quickly/index?type=2"
        >
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-2.png"
          />
          <text class="label">极速问诊</text>
          <text class="small">20s医生极速回复</text>
        </navigator>
        <navigator hover-class="none" class="quick-entry-item">
          <image
            class="quick-entry-icon"
            src="/static/images/quick-entry-3.png"
          />
          <text class="label">开药门诊</text>
          <text class="small">线上买药更方便</text>
        </navigator>
      </view>
      <!-- 快速查看 -->
      <view class="quick-view">
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_medicine/order_list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-1.png"
          />
          <text class="label">药品订单</text>
        </navigator>
        <navigator
          hover-class="none"
          class="quick-view-item"
          url="/subpkg_archive/list/index"
        >
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-2.png"
          />
          <text class="label">健康档案</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-3.png"
          />
          <text class="label">我的处方</text>
        </navigator>
        <navigator hover-class="none" class="quick-view-item">
          <image
            class="quick-view-icon"
            src="/static/images/quick-view-4.png"
          />
          <text class="label">疾病查询</text>
        </navigator>
      </view>
      <!-- 广告位 -->
      <view class="banner-placeholder">
        <swiper
          class="uni-swiper"
          indicator-dots
          indicator-color="#ffffff99"
          indicator-active-color="#fff"
          circular
        >
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image class="banner-image" src="/static/images/banner-1.png" />
            </navigator>
          </swiper-item>
          <swiper-item>
            <navigator hover-class="none" class="navigator" url=" ">
              <image
                class="banner-image"
                src="/static/images/banner-1.png"
                mode="aspectFill"
              />
            </navigator>
          </swiper-item>
        </swiper>
      </view>
      <!-- 标签页列表 -->

      <!-- 标签切换 -->
      <view
        class="doctor-feeds"
        :style="{ marginTop: -safeAreaInsets.top + 'px' }"
      >
        <custom-sticky :offset-top="safeAreaInsets.top + 'px'">
          <custom-tabs @click="onFeedTabChange" :list="feedTabs" />
        </custom-sticky>
        <doctor-list
          v-if="feedTabs[tabIndex].label === '推荐'"
          :list="doctorList"
        ></doctor-list>
        <view
          v-for="(item, index) in feedTabs"
          :key="item.type"
          v-show="tabIndex === index"
        >
          <feed-list :list="item.list" v-if="item.rendered" />
        </view>
      </view>
    </view>
  </scroll-page>
</template>
<style lang="scss">
  @import './index.scss';
</style>
